@import url("iconfonts.css");

/* variables */
@theme-color: #007AFF;
@border-color: #e3e3e3;

@black87: rgba(0,0,0,.87);
@black54: rgba(0,0,0,.53);
@black26: rgba(0,0,0,.26);
@black10: rgba(0,0,0,.1);

@white87: rgba(255,255,255,.87);
@white54: rgba(255,255,255,.53);
@white26: rgba(255,255,255,.26);
@white10: rgba(255,255,255,.1);

/* reset style */
html {
	height: 100%;
	width: 100%;
	font-size: 16px;
}
body {
	position: relative;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	color: @black87;
	background-color: #f5f5f5;
	-webkit-tap-highlight-color: rgba(0,0,0,0);//设置点击链接时出现的高亮颜色
}

body,
article, aside, footer, header, nav, section,
h1, h2, h3, h4, h5, h6,
select, input, textarea, button,
ul, ol, dl, dt, dd, li,
table, legend, thead, tbody, tfoot, tr, td, th,
div, p, span, a {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: helvetica, "Microsoft YaHei", sans-serif;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	font-size: .875rem;//14px
}
ul, ol, li {
	list-style: none;
}
a {
	text-decoration: none;
	-webkit-touch-callout: none;//禁用长按链接时出现的提示
	color: @black87;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button, input:focus, select:focus, textarea:focus {
	outline: none;
}

/* global style 全局可用样式*/
.u(@x: 2rem) {
	height: @x;
	line-height: @x;
}
.q(@x: 2rem) {
	height: @x;
	width: @x;
	line-height: @x;
	text-align: center;
}
.border { border: 1px solid @border-color; }

// vertical align
.valign{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.valign-left(@left: 0){
	position: absolute;
	top: 50%;
	left: @left;
	transform: translateY(-50%);
}
.valign-right(@right: 0){
	position: absolute;
	top: 50%;
	right: @right;
	transform: translateY(-50%);
}

/* components style 组件样式*/
.table{
	width: 100%;
	td, th{
		height: 2.75rem;
		padding: 0 .5rem;
		border-bottom: 1px solid @border-color;
		text-align: center;
	}
	tbody tr:last-child td{
		border-bottom: none;
	}
}
/* loading:加载动画 */
.loading {
	position: absolute;
	top: 5rem;
	left: 50%;
	margin-left: -1.25rem;
	.q(2.5rem);
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 0 4px 0 @black26;
	&:before {
		position: absolute;
		top: 0;
		left: 0;
		.q(2.5rem);
		content: "\e984";
		font-size: 1.25rem;
		color: @theme-color;
		font-family: 'icomoon';
		animation: rotate 1s infinite;
		transform-origin: center;
	}
	@keyframes rotate {
		0% {
			opacity: 1;
			transform: rotate(0deg);
		}
		50% {
			opacity: .54;
		}
		100% {
			opacity: 1;
			transform: rotate(360deg);
		}
	}
}

/* page style 页面框架*/
article {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #f5f5f5;
	& > header {
		position: relative;
		min-height: 2.75rem;
		width: 100%;
		padding: 0 3.5rem;
		background-color: #fff;
		h1 {
			.u(2.75rem);
			font-size: 1.125rem;
			text-align: center;
		}
		.icon-button {
			position: absolute;
			top: 0;
			min-width: 2.5rem;
			.u(2.75rem);
			padding: 0 1rem;
			&.left {
				left: 0;
			}
			&.right {
				right: 0;
			}
			.icon {
				.valign;
				.q(1.5rem);
				font-size: 1.125rem;
			}
			&.auto-width {
				padding-left: 2rem;
				padding-right: 1rem;
				font-size: 1.125rem;
				.icon {
					left: .5rem;
					transform: translateY(-50%);
				}
			}
		}
	}
	& > section {
		position: relative;
		flex: 1;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}
}

/* secretary page 秘书页面*/
.group {
  background-color: #fff;
  padding: 1rem 1.5rem 0 1.5rem;
  margin-bottom: 1.5rem;
  h2{
  	position: relative;
  	.u(2rem);
  	padding-left: 1rem;
  	color: @theme-color;
  	font-size: 1.375rem;
    font-weight: bold;
	&:before{
		content:"";
		.valign-left(-22px);
		box-sizing: border-box;
		border-left: 3px solid @theme-color;
		height: 60%;
	}
  }
  .table{
	td, th{
		width: 23%;
	}
	td:first-child, th:first-child{
		text-align: left;
		padding-left: 1rem;
		width: 31%;
	}
	td:nth-child(3), td:nth-child(4), th:nth-child(3), th:nth-child(4){
		color: #828282;
	}
	td.null:before{
		content: "\e900";
		font-family: "icomoon";
		color: @theme-color;
		font-size: 1.375rem;
		vertical-align: middle;
	}
  }
}
/* time-edit page 投入时间编辑页面 */
.time-edit-main {
	display: flex;
	flex-direction: column;
	padding: 0 1.5rem;
	background-color: #fff;
}
.hour-editor-container {
	flex: 1;
	border-bottom: 1px solid #e8e8e8;
	padding-top: 2rem;
	.tip{
		text-align: center;
		font-size: 13px;
		color: #cfcfcf;
		margin-bottom: 1rem;
	}
	.hour-editor {
    	position: relative;
    	margin: 0 auto 2rem auto;
    	width: 7.5rem;
		input[type="number"] {
			.u(2.75rem);
			width: 100%;
			font-size: 2.75rem;
			border: none;
			text-align: center;
			&::placeholder {
				color: #ccc;
				font-size: 1.75rem;
			}
		}
		&:after {
			content: 'hour';
		    position: absolute;
		    bottom: 0;
		    left: 100%;
		    line-height: 1rem;
			font-size: 1rem;
		    color: #808080;
		}
	}
	.hour-list {
		ul {
			display: flex;
			justify-content: space-between;
			margin-bottom: 1rem;
			li{
				.q(3rem);
				border-radius: 50%;
				font-size: 1rem;
				transition: all .2s;
				border: 1px solid transparent;
				&:active, &.active {
					border: 1px solid @theme-color;
					color: @theme-color;
				}
			}
		}

	}
}
.remark-edit-container{
	padding: 1rem 0;
	text-align: center;
	textarea{
		width: 100%;
		height: 5rem;
		margin-bottom: 2.5rem;
		overflow-y: auto;
		border: none;
		&::placeholder{
			color: #b3b3b3;
		}
	}
	.btn-save{
		margin-bottom: 2.5rem;
		.u(2.5rem);
		width: 11rem;
		background-color: @theme-color;
		color: @white87;
		border: none;
		border-radius: 1.5rem;
		transition: all .2s;
		&:active{
			opacity: .9;
		}
	}
}

/* project-detail page 专案投入时间详情页 */
.impo-data {
	margin-bottom: 1rem;
	background-color: #fff;
	h2 {
		margin-bottom: .75rem;
		font-size: 1rem;
		text-align: center;
	}
	.hour {
		position: relative;
		display: block;
		min-width: 3rem;
		padding: 0 1rem;
		.u(1.75rem);
		font-size: 1.75rem;
		text-align: center;
		&:after{
			content: 'hour';
			position: absolute;
		    bottom: 0;
		    left: 100%;
		    line-height: 1rem;
			font-size: 1rem;
		    color: #bdbdbd;
		}
	}
	.today {
		display: flex;
		flex-direction: column;
		padding: 2rem 0;
		.hour-container {
			position: relative;
			margin: 0 auto;
			.hour {
				.u(3rem);
				font-size: 3rem;
				color: @theme-color;
			}
			.btn-edit {
				position: absolute;
			    top: 0;
			    left: 100%;
			    border: none;
			    background-color: transparent;
			    color: @theme-color;
			    white-space: nowrap;
			    /*利用伪类扩大可点击范围*/
			    &:before {
			    	content:'';
			    	position: absolute;
			    	top: -.5rem;
			    	right: -.5rem;
			    	bottom: -.5rem;
			    	left: -.5rem;
			    }
			}
		}
	}
	.container {
		display: flex;
		justify-content: space-between;
		padding: 0 2rem 1.75rem 2rem;
		& > * {
			padding-right: 2rem;
		}
	}
	.yesterday {
		.hour {
			display: none;
		}
			/* 昨日未投入 */
		.null{
			position: relative;
			display: block;
			padding-bottom: 1.125rem;
			color: @theme-color;
			&:before {
				content: "\e900";
				font-family: 'icomoon';
				font-size: 1.75rem;
			}
			&:after {
				content: '去投入';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				line-height: 1rem;
				white-space: nowrap;
			}
		}
	}
}

.record {
	background-color: #fff;
	padding: 1rem;
	& > li {
		display: flex;
		align-items: flex-start;
		padding: 1rem;
		border-bottom: 1px solid #f0f0f0;
		&:last-child {
			border-bottom: none;
		}
		/* 今天不显示小时数 */
		&:first-child .hour {
			display: none;
		}
		& > * {
			line-height: 1rem;
		}
		.date {
			white-space: nowrap;
			margin-right: 1.5rem;
		}
		.hour {
			white-space: nowrap;
			width: 1.75rem;
			margin-right: 1rem;
		}
		.remark {
			color: #6e6e6e;
			word-break: break-all;
		}
	}
}

/* project-list page 专案列表 */
.project-list-main {
	& > .tip {
		.u(2.5);
		background-color: @theme-color;
		color: @white87;
		text-align: center;
	}
}
.project {
	position: relative;
	padding: 1rem 3rem 1rem 1rem;
	margin-bottom: 1.25rem;
	background-color: #fff;
	&:after {
		position: absolute;
		top: 1rem;
		right: .75rem;
		content: "\e409";
		font-family: 'icomoon';
		font-size: 1.25rem;
		.q(1.5rem);
		color: @black54;
	}
	h2 {
		font-size: .9375rem;
	}
	.data {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.total {
			margin-left: 1.25rem;
			font-size: 1.125rem;
			&:before{
				margin-right: .5rem;
				content: '总计';
				color: #8f8f8f;
				font-size: .875rem;
			}
		}
		.today {
			width: 4.5rem;
			font-size: 1.25rem;
			color: @theme-color;
			&:before {
				margin-right: .5rem;
				content: '今日';
				font-size: .875rem;
			}
			&.null:before {
				margin-right: 0;
				content: '今日未投入';
				color: #8f8f8f;
			}
		}
	}
}

/* admin page 管理者主页 */
.to-pro-list{
	.valign-right(1rem);
	font-size: 1rem;
	color: @theme-color;
}
.tabs {
	min-height: 3rem;
	padding-top: .5rem;
	text-align: center;
	background-color: #fff;
	font-size: 0;
	a{
		display: inline-block;
		width: 8.25rem;
		.u(1.5rem);
		text-align: center;
		font-size: .875rem;
		border-radius: 4px;
		color: @theme-color;
		border: 1px solid @theme-color;
		transition: all .2s;
		&:last-child{
			margin-left: 2px;
		}
		&:active, &.active{
			background-color: @theme-color;
			color: @white87;
		}
	}
}
.project-container, .person-container {
	background-color: #fff;
	padding-bottom: 1rem;
}

.person-container {
	display: none;
}

.collapse {
	padding: 0 1rem;
	.collapse-title {
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 1rem 0 1rem 1.5rem;
		&:before {
			position: absolute;
			top: 1rem;
			left: 0;
			.q(1rem);
			content: "\f0da";
			font-family: 'icomoon';
			font-size: 1rem;
			transition: all .2s;
		}
		& > * {
			line-height: 1rem;
		}
		& > *:last-child {
			margin-left: 1.5rem;
			color: #8c8c8c;
			white-space: nowrap;
		}
	}
	.collapse-content {
		display: none;
		padding-left: 1.5rem;
		& > li {
			padding: .75rem 0;
			display: flex;
			justify-content: space-between;
			& > *:last-child {
				white-space: nowrap;
				margin-left: 1.5rem;
			}
		}
	}
	&.on {
		.collapse-title:before{
			transform: rotate(90deg);
		}
		.collapse-content {
			display: block;
		}
	}
}